<template>
    <div class="common-size brand_analysis_container">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="brand_analysis_chart">
            <div class="brand_analysis_chart_box">
                <div ref="useAgeLimitDom_1" class="chart-box">

                </div>
                <div class="y-name">设备数量(台)</div>
                <div class="clear mark">
                    <div class="left"><i></i>国产</div>
                    <div class="left"><i></i>进口品牌</div>
                </div>
                <h3>设备数量TOP10品牌</h3>
            </div>
        </div>
        <div class="sending-book-text">
            <div v-html="item" v-for="(item, index) in textData"></div>
        </div>

        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import echarts from 'echarts'
  import {nuxtMixins} from '../assets/javascript/mixin'
  export default {
    name: 'lifeDevice_brand_analysis',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        defaultOption:{
                tooltip: {
        trigger:'axis',

        formatter: "保障率&占比 : {c}%",

        axisPointer: {
            type: 'cross',

            crossStyle: {
                color: '#999'
            }
        }
    },

    xAxis: [
        {
            type: 'category',
            show:true,

            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },

            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color:'#989898'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            }
        }
    ],

    yAxis: [
        {
            type: 'value',

        },

    ],
    series: [
        {
            name:'保障率',
            type:'bar',
            barWidth: '30%',
            label: {
                normal: {
                    show: true,

                    formatter: '{c}'
                }
            },
            data:[]
        }
    ]



          },
        pageTitle: '生命支持类设备分析',
        detailTitle: '品牌分析'
      }
    },
    computed:{
      oneRemarkData () {
        return this.chartData.remark
      },
      linearData () {
        return [
            {start:'#9ec4e7',end:'#4b8bc9'},
            {start:'#a9d49e',end:'#70bf72'}
          ]
      },
      textData () {
        return this.chartData.textData
      },
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      deviceNumChart () {
        if(!this.chartData.chartData) return
        const data = this.chartData.chartData;
        const barData = [];
        const colorStops = [];
        const linearData = this.linearData
        data.y_data.forEach((obj,index) => {
            let startColor = linearData[data.source[index]].start
            let endColor = linearData[data.source[index]].end
            barData.push({
              value:obj,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: startColor// 0% 处的颜色
                    }, {
                      offset: 1, color: endColor // 100% 处的颜色
                    }],
                    globalCoord: false
                  }
                }
              }
            })
        })
        const option= {};
        for(var k in this.defaultOption){
            option[k] = this.defaultOption[k]
        }
        option.xAxis[0].data = this.chartData.chartData.x_data
        option.yAxis[0].max = this.chartData.chartData.y_max
        option.series[0].data = barData

        this.liquidfillEchart = echarts.init(this.$refs.useAgeLimitDom_1)
        this.liquidfillEchart.setOption(option)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .brand_analysis_container {
        .brand_analysis_chart {
            margin-top: 10px;
            padding: 0 35px;
            .brand_analysis_chart_box {
                height:595px;
                position: relative;
                background: #FFF;
                .chart-box {
                    width: 100%;
                    height: 520px;
                }
                .y-name {
                    position: absolute;
                    top: 35px;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
                >h3{
                    color: #666;
                    font-size: 18px;
                    position: absolute;
                    font-weight: normal;
                    width: 100%;
                    text-align: center;
                    bottom: 20px;
                }
                .mark{
                    color: #666;
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    width: 160px;
                    margin: 0 auto;
                    >div{
                        width: 80px;
                        height: 20px;
                        >i{
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            margin: 0 5px 0 0 ;
                            background: -webkit-gradient(linear,left top,left bottom,from(#4b8bc9),to(#91ecb4));
                        }
                        &:nth-child(2)>i{
                            background: -webkit-gradient(linear,left top,left bottom,from(#a9d49e),to(#70bf72));
                        }
                    }

                }
            }

        }
        >h4{
            color: #666;
            text-align: center;
            width: 100%;
            padding: 20px 0 25px ;
            >b{
                color: #000;
            }
        }
        .detail-title{
            color: #0a122d;
            font-weight: 700;
            padding: 0 35px;
        }

    }
</style>
